<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom操作</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素
var txt3=document.createElement("big");  // 通过 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}
$(document).ready(function(){
  $(".btn0").click(function(){
    $("<span>你好！</span>").insertAfter(".p0");
  });
  $(".btn1").click(function(){
    $("<b>Hello World!</b>").prependTo(".p1");
  });
  $(".btn2").click(function(){
    $(".p2").prepend("<b>Hello world!</b> ");
  });
});
</script>
</head>
<body>

<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button onclick="afterText()">在图片后面添加文本</button>

<p class="p0">这是一个段落。</p>
<p class="p0">这是另一个段落。</p>
<button class="btn0">在每个 p 元素之后插入 span 元素insertAfter</button>

<p class="p1">This is a paragraph.</p>
<p class="p1">This is another paragraph.</p>
<button class="btn1">在每个 p 元素的开头插入文本prependTo</button>

<p class="p2">This is a paragraph.</p>
<p class="p2">This is another paragraph.</p>
<button class="btn2">在每个 p 元素的开头插入内容prepend</button>
</body>
</html>
